vue3 Composition API 學習手冊-28 打包與回顧

第 12 屆 iThome 鐵人賽

DAY 28

自我挑戰組

網頁前端框架 Vue 3 從頭開始（重新挑戰）系列第 28 篇

12th鐵人賽 vue3 vue 3

史坦利

2020-10-10 10:37:30

1646 瀏覽

分享至

vue3 Composition API的文章寫到這邊，歷經了：

基礎介紹篇（v-for、v-on、v-bind...等等）
安裝vue-cli與基礎介紹
認識vue-cli component製作
認識vue-router
vue ~~mixin~~ 共用函數

上面的內容，突然想到還沒教大家如何打包我們在vue-cli的專案（總不能老是要人家用localhost:8080）去看吧？不過這個是很簡單的一件事，可以很快的就帶過，另外還有一件比較重要的任務，我在這次介紹vue3，從一開始就沒去比較vue2與vue3之間的差異，因為文章希望能從頭開始，就算是框架初學者也能夠順利上手，所以沒有去提什麼是Composition API（Vue 3），什麼是Options API（Vue 2），但從上一篇文章「vue3 Composition API 學習手冊-27 以前叫mixin的東西」，和之前的「vue3 Composition API 學習手冊-13 生命週期」，好像就不得已的需要題一些歷史，既然這樣，這一篇文章就來回顧一下大家在這一系列的學習中，到底有什麼收穫吧！當然首先是檔案打包。

檔案打包

這部分很簡單，只要先把之前npm run serve和Control + C先停掉，然後在資料夾中輸入npm run build，這個時候系統會自動啟動webpack幫你把所有有用到的檔案打包好，甚至是壓縮好，也就是把所有的HTML、CSS、Javascript都壓縮成一行，節省檔案的容量，打包好的檔案會放在原資料夾內的dist資料夾中。

接下來就是把你打包好的檔案傳送到網路伺服器就可以了，不過要注意一點，webpack會希望你把這些檔案都打包到網站的根資料夾，但有時候我們可能會想上傳到伺服器中另外的資料夾中（像我們這些文章的範例檔，都在不同的資料夾裡面），這時就會發生找不到檔案的錯誤，沒關係，遇到這種情況，只需要在你的工作根目錄中新增一個vue.config.js的檔案，然後在裡面寫下這樣的內容：

module.exports = {
    publicPath:'./',
}

然後再重新執行打包的命令npm run build即可，這大概就是打包大致上的程序。

Composition API

以下這些主要是針對有學習過vue 2的朋友，當然剛開始學vue 3的大家，也可以了解一下囉！

之所以vue 3改為新的Composition API主要是為了解決以下幾個問題：

mixin資料來源清晰、不會有名稱衝突的問題
不再撰寫大量的this，搞得大家很混亂
只把需要的屬性return出去
利用ref或reactive去監控需要被監控的變數，不要把阿貓阿狗都交給他
讓所有相同形式的內容可以被撰寫在一起（借用一下官網上面的圖）

我想學習到這邊，應該有些朋友對ref和reactive這兩個監控資料的方法有一些不了解，在我們之前的範例中有時候用的是ref，而大部分用的是reactive，基本上透過這兩個方法所定義的變數，都會被vue給監控，但差異究竟在哪裡？這邊也幫大家做個整理：

reactive：
- 類似於 V2.x 的 Vue.observable()
- 無需使用.value來存取資料
- 與Vue.observable不同的是他可以接受物件和陣列兩種性質的資料
ref：
- 必須透過.value來存取資料
- 可以接受各種性質的資料型態

透過下面的案例進行一些分析：

ref

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
    <div id="app">
        {{ title }}
    </div>
</body>

</html>

<script>
    const { ref } = Vue;
    const app = {
        setup() {
            const title = ref("Hello, Vue 3!");
            setTimeout(() => {
                // title = "New Title" <= 錯誤的寫法需要透過.value才能變更
                title.value = "New Title";
            }, 1000);
            return { title };
        }
    }
    const myVue = Vue.createApp(app).mount("#app");
</script>

reactive

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
    <div id="app">
        {{ state.title }}
    </div>
</body>

</html>

<script>
    const { reactive } = Vue;
    const app = {
        setup() {
            // const title = reactive("Hello, Vue 3!"); <= 錯誤的寫法，只能接受陣列或物件
            const state = reactive({ title: "Hello, Vue 3!" });
            setTimeout(() => {
                // title = "New Title" <= 錯誤的寫法會產生Error
                state.title = "New Title";
            }, 1000);
            return { title };
        }
    }
    const myVue = Vue.createApp(app).mount("#app");
</script>

方法沒有對錯，就是多個選擇給大家，我個人習慣用物件包住所有被管控的資料，需要的時候統一跟該物件拿，所以前面的範例大多用reactive來處理，除非有時候你要管理的資料並非物件或陣列形式，那就可以透過ref來進行管理，以上是我自己的習慣。

總之大家正在學習的vue 3在速度上、撰寫結構上與效能上都會比原本的vue 2來得好，但也有致命的缺點，就是已經不相容於IE瀏覽器了，但好像微軟也跟IE說掰掰了，甚至都已經有chromium核心的edge可以使用了，看來瀏覽器要被Google統一天下了，這也讓vue 3可以毫不猶豫的放棄舊的瀏覽器，但當然，如果你的專案要能支援IE，那...vue 2是個選擇，但還好我們現在做的專案大部分都以Chrome做為主要瀏覽器，相信睿智的政府，一定會慢慢汰換掉IE才對的吧？